$baseFontSize: 50;//基数
@function px2rem($px){
    @return $px / $baseFontSize * 1rem;
}
/* 公共的css样式 */
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

* {
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}

/*溢出不换行*/

.hc-one-in {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  box-orient: vertical;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */;
  -webkit-line-clamp: 1;
}

.hc-one-in-1 {
  -webkit-line-clamp: 1;
}

.hc-one-in-2 {
  -webkit-line-clamp: 2;
}

.hc-one-in-3 {
  -webkit-line-clamp: 3;
}
.hc-one-in-4 {
  -webkit-line-clamp: 4;
}

/* 布局 */
.hc-pa {
  position: absolute;
}
.hc-pr {
  position: relative;
}
.hc-fl {
  float: left;
}
.hc-fr {
  float: right;
}
.hc-paddingt48 {
  padding-top: 48px;
}
.hc-w100-per {
  width: 100%;
}
.hc-h100-per {
  height: 100%;
}
.hc-padding0 {
  padding: 0px;
}
.hc-col-12 {
  width: 100%;
}
.hc-col-11 {
  display: inline-block;
  width: 91.66666667%;
}
.hc-col-10 {
  display: inline-block;
  width: 83.33333333%;
}
.hc-col-9 {
  display: inline-block;
  width: 75%;
}
.hc-col-8 {
  display: inline-block;
  width: 66.66666667%;
}
.hc-col-7 {
  display: inline-block;
  width: 58.33333333%;
}
.hc-col-6 {
  display: inline-block;
  width: 50%;
}
.hc-col-5 {
  display: inline-block;
  width: 41.66666667%;
}
.hc-col-4 {
  display: inline-block;
  width: 33.33333333%;
}
.hc-col-3 {
  display: inline-block;
  width: 25%;
}
.hc-col-2 {
  display: inline-block;
  width: 16.66666667%;
}
.hc-col-1 {
  display: inline-block;
  width: 8.33333333%;
}


/* 字体 */
.hc-f0 {
  font-size: 0px !important;
}
.hc-f10 {
  font-size: 10px !important;
}
.hc-f12 {
  font-size: 12px !important;
}
.hc-f13 {
  font-size: 13px !important;
}
.hc-f14 {
  font-size: 14px !important;
}
.hc-f15 {
  font-size: 15px !important;
}
.hc-f16 {
  font-size: 16px !important;
}
.hc-f17 {
    font-size: 17px !important;
}
.hc-f18 {
  font-size: 18px !important;
}
.hc-f19 {
    font-size: 19px !important;
}
.hc-f20 {
  font-size: 20px !important;
}
.hc-f25 {
    font-size: 25px !important;
}
.hc-text-center {
  text-align: center !important;
}
.hc-inlineblock {
  display: inline-block !important;
}

// 字体颜色
.hc-c333 {
  color: #333333;
}
.hc-cb3 {
  color: #b3b3b3;
}
.hc-cff7 {
  color: #ff7371;
}
.hc-cfff {
  color: #ffffff;
}
.hc-c999 {
  color:  #999999;
}

// 背景颜色
.hc-bgfff {
  background-color: #fff !important;
}
.hc-bgf1 {
  background-color: #f1f1f1 !important;
}


.hc-flex{
  text-align: left;
  overflow: hidden;
  display: flex;
  align-items: center;
    .hc-flex-item{
      box-sizing: border-box;
      flex: 1;
      &.hc-flex-item-2{
        flex: 2;
      }
      &.hc-flex-item-3{
        flex: 3;
      }
      &.hc-flex-item-4{
        flex: 4;
      }
      &.hc-flex-item-5{
        flex: 5;
      }
    }
}

  .hc-text-center{
      text-align: center;
  }
  .hc-text-right{
      text-align: right;
  }
  .hc-text-left{
      text-align: left;
  }
/* 空白元素 */
.hc-whitespace-sm {
    height: 5px;
}
.hc-whitespace-md {
    height: 10px;
}
.hc-whitespace-lg {
    height: 15px;
}

// 底部边框
.hc-border-bottom {
  border-bottom: 1px solid #292929 !important;
}




.hc-roll-enter,
.hc-roll-leave-to {
    transform: translateX(30px) rotate(360deg);
    opacity: 0.5;
}

// 无数据样式
.hc-nodata {
  text-align: center;
  line-height: 100px;
  // color: #cccccc;
}
.hc-no-list {
  img {
    width: 180px;
    height: 180px;
    display: block;
    margin: 120px auto 30px;
  }
  p {
    font-size: 15px;/*px*/
    color: #666;
    text-align: center;
  }
}

.spinner {
  margin: 200px auto;
  width: 100px;
  height: 120px;
  text-align: center;
  font-size: 20px;/*px*/
}

.spinner > div {
  background-color: #FFE127;
  height: 100%;
  width: 12px;
  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.hc-loading {
  position: fixed;
  z-index: 5001;
  width: 200px;
  min-height: 160px;
  top: 360px;
  left: 50%;
  margin-left: -90px;
  background: hsla(0,0%,7%,.7);
  text-align: center;
  border-radius: 10px;
  padding: 30px;
  color: #fff;
  div {
      line-height: 60px;
      font-size: 14px;/*px*/
  }
  img {
      display: inline-block;
      width: 48px;
  }
  .spinner {
      margin: 20px auto;
  }
  .spinner > div {
      background-color: #FFF;
  }
}